<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户管理</title>
	<link rel="stylesheet" href="../EasyUI-1.5.3/themes/default/easyui.css">
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/jquery-1.8.0.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.min.js"></script>
    <script src="../EasyUI-1.5.3/jquery.easyui.min.js" ></script>
    <script src="../EasyUI-1.5.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>
<body>
	<div class="easyui-layout" data-options="fit:true">
	    <!-- Begin of toolbar -->
	    <div id="wu-toolbar-2">
	        <div class="wu-toolbar-button">
	            <a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="openAdd()" plain="true">添加</a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" onclick="openEdit()" plain="true">修改</a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" onclick="remove()" plain="true">删除</a>
	            <a href="#" class="easyui-linkbutton" iconCls="icon-reload" onclick="reload()" plain="true">刷新</a>
	        </div>
	        <div class="wu-toolbar-search">
	            <label>起始时间：</label><input class="easyui-datebox" style="width:100px">
	            <label>结束时间：</label><input class="easyui-datebox" style="width:100px">
	            <label>用户组：</label>
	            <select class="easyui-combobox" panelHeight="auto" style="width:100px">
	                <option value="0">选择用户组</option>
	                <option value="1">黄钻</option>
	                <option value="2">红钻</option>
	                <option value="3">蓝钻</option>
	            </select>
	            <label>关键词：</label><input class="wu-text" style="width:100px">
	            <a href="#" class="easyui-linkbutton" iconCls="icon-search">开始检索</a>
	        </div>
	    </div>
	    <!-- End of toolbar -->
	    <table id="wu-datagrid-2" class="easyui-datagrid" toolbar="#wu-toolbar-2"></table>
	</div>
	<!-- Begin of easyui-dialog -->
	<div id="wu-dialog-2" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
		<form id="wu-form-2" method="post" data-options="novalidate:true">
	        <table>
	            <tr>
	                <td width="60" align="right">姓 名:</td>
	                <td><input id='index-form-name' type="text" name="name" class="wu-text" /></td>
	            </tr>
	            <tr>
	                <td align="right">密 码:</td>
	                <td><input id='index-form-paw' type="text" name="password" class="wu-text"/></td>
	            </tr>
	            <tr>
	                <td align="right">城 市:</td>
	                <td><input id='index-form-city' type="text" name="city" class="wu-text" /></td>
	            </tr>
	            <tr>
	                <td valign="top" align="right">日期:</td>
	                <td>
	                <!-- <input  id="index-form-date" type="text" name="date"> -->
	                <input class="easyui-datetimebox" name="date"
    data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:100%">
	                </td>
	            </tr>
	        </table>
	    </form>
	</div>

	<!-- End of easyui-dialog -->
	<script type="text/javascript">
		//刷新表单
		function reload(){
			$('#wu-datagrid-2').datagrid('reload');
		}

		//表单验证
		$('#index-form-name').validatebox({
	         required: true,
	         missingMessage:"请输入姓名"
	     });
		$('#index-form-paw').validatebox({
	         required: true,
	         missingMessage:"请输入密码",
	         // validType:'password',
	         // invalidMessage:"格式不对"
	     });
		$('#index-form-name').validatebox({
	         required: true,
	         missingMessage:"请输入姓名"
	     });
		$('#index-form-name').validatebox({
	         required: true,
	         missingMessage:"请输入姓名"
	     });

		$('#index-form-date').datetimebox({		//添加用户信息的date
	        value: '3/4/2010 2:3',
	        required: true,
	        showSeconds: false
	    });
		
		/**
		* Name 删除记录
		*/
		function remove(){
			$.messager.confirm('信息提示','确定要删除该记录？', function(result){
				if(result){//result是一个true的布尔值
					var items = $('#wu-datagrid-2').datagrid('getSelections');
					var ids = [];
					$(items).each(function(){
						ids.push(this._id);
					});
					$.ajax({
						url:'http://localhost:3000/users/data'+ids,
						type:'DELETE',
						success:function(data){
							console.log(data);
							if(data){
								$.messager.alert('信息提示','删除成功！','info',()=>{	
									$('#wu-datagrid-2').datagrid('reload');
								});

							}
							else{
								$.messager.alert('信息提示','删除失败！','info');
							}
						}
					})
				}else{

				}
			});
		}
		
		/*
			Name 打开添加窗口
		*/
		function openAdd(){
			$('#wu-form-2').form('clear');
			$('#wu-dialog-2').dialog({
				closed: false,
				modal:true,
	            title: "添加信息",
	            buttons: [{
	                text: '确定',
	                iconCls: 'icon-ok',
	                handler:add
	            }, {
	                text: '取消',
	                iconCls: 'icon-cancel',
	                handler: function () {
	                    $('#wu-dialog-2').dialog('close');
	                }
	            }]
	        });
		}
		
		/*
		 	Name 添加记录
		*/
		function add(){
			let username = $('#index-form-name');
			let userpaw = $('#index-form-paw');
			let usercity = $('#index-form-city');
			let userdate = $('#index-form-date');
			$('#wu-form-2').form('submit', {
				url:'http://localhost:3000/users/data',
				onSubmit:()=>{
					//这里做一些检测和判断
					if(username.val() == '' || userpaw.val() == '' || usercity.val() =="" || userdate.val() == ''){
						$.messager.alert('信息提示','不能为空！','info');
						return false;
					}
				},
				success:(data)=>{
					// console.log($('#wu-form-2').serializeJSON());
					// $.ajax({
					// 	url:'http://localhost:3000/users/data',
					// 	type:'POST',
					// 	data:$('#wu-form-2').serializeJSON(),
					// 	success:function(data){
					// 		console.log(data);
					// 		if(data){
					// 			$.messager.alert('信息提示','添加成功！','info');
					// 			$('#wu-dialog-2').dialog('close');
					// 		}
					// 		else
					// 		{
					// 			$.messager.alert('信息提示','添加失败！','info');
					// 		}
					// 	}
					// });
					//上面的ajax的数据提交会提交两次
					// console.log(data);
					// console.log(typeof data);
					if(!data){
						$.messager.alert('信息提示','提交成功！','info',()=>{
							$('#wu-datagrid-2').datagrid('reload');
						});
						$('#wu-dialog-2').dialog('close');
					}
					else
					{
						$.messager.alert('信息提示','提交失败！','info');
					}
				}
			});
		}

		/**
		* Name 打开修改窗口
		*/
		function openEdit(){
			$('#wu-form-2').form('clear');
			var item = $('#wu-datagrid-2').datagrid('getSelected');	//选中的记录对象
			// console.log(item._id);	//获取选中对象的id值
			var edit_id=item._id;
			
			$("#wu-form-2").form('load',item);
			console.log($("#wu-form-2").serializeJSON());
			
			$('#wu-dialog-2').dialog({		//dialog对话框
				closed: false,
				modal:true,
	            title: "修改信息",
	            buttons: [{
	                text: '确定',
	                iconCls: 'icon-ok',
	                handler:function edit(){
						console.log(edit_id);
						$('#wu-form-2').form('submit', {
							url:'http://localhost:3000/users/data'+edit_id,
							success:function(data){
								if(!data){
									$.messager.alert('信息提示','修改成功！','info',()=>{
										$('#wu-datagrid-2').datagrid('reload');
									});
									$('#wu-dialog-2').dialog('close');
								}
								else
								{
									$.messager.alert('信息提示','修改失败！','info');
								}
							}
						});
					}
	            }, {
	                text: '取消',
	                iconCls: 'icon-cancel',
	                handler: function () {
	                    $('#wu-dialog-2').dialog('close');
	                }
	            }]
	        });
		}

		//serializeJSON有问题

			// function edit(edit_id){
			// 	alert(edit_id);
			// 	$.ajax({
			// 		url:'http://localhost:3000/users/data'+edit_id,
			// 		data:$("#wu-form-2").serializeJSON()
			// 	})
			// }

		/**
		* Name 修改记录
		*/
		// function edit(edit_id){
		// 	console.log(edit_id);
		// 	$('#wu-form-2').form('submit', {
		// 		url:'http://localhost:3000/users/data'+edit_id,
		// 		success:function(data){
		// 			if(data){
		// 				$.messager.alert('信息提示','修改成功！','info');
		// 				$('#wu-dialog-2').dialog('close');
		// 			}
		// 			else
		// 			{
		// 				$.messager.alert('信息提示','修改失败！','info');
		// 			}
		// 		}
		// 	});
		// }

		/*
			Name 载入数据----分页
		*/
		$('#wu-datagrid-2').datagrid({
			url:'http://localhost:3000/users/list',
			method:'post',
			// loadFilter:pagerFilter,//过滤器方法
			rownumbers:true,
			singleSelect:false,
			pageSize:4,
			pageList:[4,8,12,16],
			pagination:true,
			multiSort:true,
			fitColumns:true,
			fit:true,
			columns:[[
				// { checkbox:true},
				{ field:'null',checkbox:true},
				{ field:'name',title:'姓名',width:100,sortable:true},
				{ field:'password',title:'密码',width:100,sortable:true},
				{ field:'city',title:'城市',width:100,sortable:true},
				{ field:'date',title:'日期',width:100,sortable:true},
			]]
		});
	</script>
</body>
</html>